<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8" />
    <title>欢迎来到中国博物</title>
    <link rel="'shortcut icon" href="icos/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class = "shotcut">
            <div class = "wrapper">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#"><span></span>个人主页</a></li>
                </ul>
                
            </div>
    </div>
    <div class = "header wrapper">
            <ul>
                <li><img src="" alt=""></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">书画</a></li>
                <li><a href="#">礼器</a></li>
                <li><a href="#">建筑</a></li>
                <li><a href="#">手工业产品</a></li>
                <li><a href="#">红色文化</a></li>
                <li><span></span><input type="text" placeholder="search"></li>

            </ul>
    </div>

    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./icos/pics1.png" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="./icos/pics2.png" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="./icos/pics3.png" alt="Slide 3">
            </div>
    </div>

    <button class="carousel-control prev">&#10094;</button>
    <button class="carousel-control next">&#10095;</button>

    <div class="carousel-indicators">
            <span class="indicator active" data-slide-to="0"></span>
            <span class="indicator" data-slide-to="1"></span>
            <span class="indicator" data-slide-to="2"></span>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
        const carousel = document.querySelector('.carousel');
        const inner = document.querySelector('.carousel-inner');
        const items = document.querySelectorAll('.carousel-item');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        const indicators = document.querySelectorAll('.indicator');

        let currentIndex = 0;
        const totalItems = items.length;

        // 切换到指定索引的幻灯片
        function goToSlide(index) {
            if (index < 0) index = totalItems - 1;
            else if (index >= totalItems) index = 0;

            inner.style.transform = `translateX(-${index * 100}%)`;
            currentIndex = index;

        // 更新指示器状态
            indicators.forEach((indicator, i) => {
            indicator.classList.toggle('active', i === currentIndex);
        });
    }

    // 下一张
        function nextSlide() {
            goToSlide(currentIndex + 1);
        }

    // 上一张
        function prevSlide() {
            goToSlide(currentIndex - 1);
        }

    // 自动轮播（可选）
        let interval = setInterval(nextSlide, 3000);

    // 鼠标悬停时暂停轮播
    carousel.addEventListener('mouseenter', () => clearInterval(interval));
    carousel.addEventListener('mouseleave', () => interval = setInterval(nextSlide, 3000));

    // 按钮点击事件
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);
});
    </Script>

   

</body>
</html>